<template>
  <div class="api-review">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="current-mode">当前模式: {{ currentMode.note }}</span>

        <el-select
          v-model="auditMode"
          placeholder="请选择审核模式"
          class="audit-mode-select"
          @change="handleAuditModeChange"
        >
          <el-option
            v-for="mode in auditModes"
            :key="mode.id"
            :label="mode.note"
            :value="mode.id"
          ></el-option>
        </el-select>
      </div>
      <el-table
        :data="pendingApis"
        style="width: 100%"
        class="api-table"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="name"
          label="API名称"
          width="180"
        ></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleReview(scope.$index, scope.row)"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button
        type="primary"
        @click="handleBatchReview"
        v-if="isAdmin"
        class="batch-review-btn"
        >一键审核</el-button
      >
    </el-card>

    <el-dialog title="API审核" :visible.sync="dialogVisible" width="50%">
      <el-form :model="currentApi" label-width="120px">
        <el-form-item label="API名称">
          <el-input v-model="currentApi.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            type="textarea"
            v-model="currentApi.description"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input
            type="textarea"
            v-model="reviewComment"
            placeholder="请输入审核意见"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleApprove">通 过</el-button>
        <el-button type="danger" @click="handleReject">拒 绝</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import axios from "axios";

export default {
  name: "ApiReview",
  data() {
    return {
      pendingApis: [],
      dialogVisible: false,
      currentApi: {},
      reviewComment: "",
      auditMode: "", // 默认手动审核模式
      auditModes: [],
      currentMode: "",
      isAdmin: true,
    };
  },
  created() {
    this.fetchPendingApis();
    this.fetchAuditMode();
  },
  methods: {
    fetchPendingApis() {
      axios
        .get("/api/system/apiReview")
        .then((response) => {
          if (response.data.code === 40001) {
            this.$message.error(response.data.message);
            this.isAdmin = false;
          }
          if (response.data.code === 200) {
            this.pendingApis = response.data.data;
          }
        })
        .catch((error) => {
          console.error("获取待审核API列表失败", error);
          this.$message({
            message: "获取待审核API列表失败",
            type: "error",
          });
        });
    },
    handleReview(index, row) {
      this.currentApi = { ...row };
      this.dialogVisible = true;
    },
    handleApprove() {
      this.pendingApis = this.pendingApis.filter(
        (api) => api.id !== this.currentApi.id
      );
      axios
        .get("/api/system/passApi", {
          params: {
            apiId: this.currentApi.id,
          },
        })
        .then((response) => {
          if (response.data.code === 200) {
            this.$message({
              message: "API审核通过",
              type: "success",
            });
          }
        });

      this.dialogVisible = false;
    },
    handleReject() {
      axios
        .get("/api/system/reject", {
          params: {
            apiId: this.currentApi.id,
            comment: this.reviewComment,
          },
        })
        .then((response) => {
          if (response.data.code === 200) {
            this.pendingApis = this.pendingApis.filter(
              (api) => api.id !== this.currentApi.id
            );
            this.$message({
              message: "API审核拒绝",
              type: "warning",
            });
          } else {
            this.$message({
              message: "拒绝API审核失败",
              type: "error",
            });
          }
        })
        .catch((error) => {
          console.error("拒绝API审核失败", error);
          this.$message({
            message: "拒绝API审核失败",
            type: "error",
          });
        });

      this.dialogVisible = false;
    },
    handleBatchReview() {
      this.$confirm("确定要一键审核选中的API吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$refs.multipleTable.toggleAllSelection();
          this.pendingApis = [];
          this.$message({
            message: "一键审核完成",
            type: "success",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消一键审核",
          });
        });
    },
    handleAuditModeChange(mode) {
      axios
        .get("/api/system/changeMode", {
          params: {
            modeId: mode,
          },
        })
        .then((response) => {
          if (response.data.code === 200) {
            this.$message({
              message: `审核模式已切换`,
              type: "info",
            });
            this.fetchAuditMode();
          } else {
            this.$message({
              message: "更改审核模式失败",
              type: "error",
            });
          }
        })
        .catch((error) => {
          console.error("更改审核模式失败", error);
          this.$message({
            message: "更改审核模式失败",
            type: "error",
          });
        });
    },
    fetchAuditMode() {
      axios
        .get("/api/system/reviewMode")
        .then((response) => {
          if (response.data.code === 200) {
            this.currentMode = response.data.currentMode;
            this.auditModes = response.data.data;
          }
        })
        .catch((error) => {
          console.error("获取审核模式失败", error);
          this.$message({
            message: "获取审核模式失败",
            type: "error",
          });
        });
    },
  },
};
</script>
  
<style scoped>
.api-review {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  color: #2c3e50;
}

.box-card {
  margin-bottom: 20px;
}

.api-table {
  margin-top: 20px;
}

.audit-mode-select {
  float: right;
  width: 150px;
}

.batch-review-btn {
  margin-top: 20px;
}
.current-mode {
  margin-right: 20px;
}
</style>
